<template>
  <div>
    <div>
      <el-card style="margin-bottom: 10px">
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <div>
            <div class="w-1 bg-blue-500 h-6 inline-block align-top mr-2"></div>
            <span style="color: #1074fd">视频合成</span>
          </div>
        </div>
      </el-card>
    </div>
    <div>
      <el-card>
        <el-form :inline="true" :model="formData">
          <!-- <el-form-item label="标题:">
            <el-input placeholder="请输入" v-model="formData.title"></el-input>
          </el-form-item> -->

          <!-- <div class="mt-6">
            <el-form-item label="固定图片:">
              <el-upload
                multiple
                ref="upload"
                :limit="1"
                :data="imgData"
                :action="imgAxiosUrl"
                :on-success="uploadImgSuccess"
              >
                <el-button type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span class="ml-6 flex flex-col">
                <span class="text-sm text-red-600">注：上传数量有限制</span>
                <span class="text-sm text-gray-500"
                  >仅支持上传jpg/png格式文件，单个文件不能超过50KB</span
                >
              </span>
            </el-form-item>
          </div> -->

          <!-- <div class="ml-10">
            <div>预览：</div>
            <div class="grid grid-cols-5 gap-4">
              <img
                v-for="item in showImgSrc"
                :src="item"
                :key="item"
                class="
                  object-fill
                  w-48
                  h-44
                  rounded-md
                  border-gray-300 border-2
                "
              />
            </div>
          </div> -->

          <!-- <div>
            <el-form-item label="固定视频:">
              <el-upload
                :limit="1"
                :action="guVideoAxiosUrl"
                :data="guVideoData"
                :on-success="uploadVideoSuccess"
              >
                <el-button type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span class="ml-6 flex flex-col">
                <span class="text-sm text-red-600">注：上传数量有限制</span>
                <span class="text-sm text-gray-500"
                  >仅支持上传mp4/mov格式文件，单个文件不能超过50MB</span
                >
              </span>
            </el-form-item>
          </div> -->

          <!-- <div class="ml-10">
            <div>预览：</div>
            <div class="grid grid-cols-5 gap-4">
              <video
                v-for="item in showVideoSrc"
                controls
                muted
                autoplay="autoplay"
                :src="item"
                :key="item"
                class="
                  object-fill
                  w-48
                  h-44
                  rounded-md
                  border-gray-300 border-2
                "
              ></video>
            </div>
          </div> -->

          <div>
            <el-form-item label="视频上传:">
              <el-upload
                ref="upload"
                multiple
                :limit="20"
                :action="customVideoUrl"
                :http-request="httpRequest"
                :on-success="uploadVideoSuccess"
                :auto-upload="false"
              >
                <el-button type="primary">选择视频</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span class="ml-6 flex flex-col">
                <span class="text-sm text-red-600"
                  >注：每次最多上传20个视频, 可上传视频总数：{{videoNumLimitFun}}</span
                >
                <span class="text-sm text-gray-500"
                  >仅支持上传mp4/mov格式文件，单个文件不能超过50MB</span
                >
              </span>
            </el-form-item>
            <el-form-item>
              <!-- <el-button type="primary" @click="addVideo">提交</el-button> -->
              <el-button type="primary" style="margin-left: 80px" @click="submitUpload"
                >上传到服务器</el-button
              >
              <!-- <el-button type="primary" @click="updateVideo">修改</el-button> -->
            </el-form-item>
            <!-- <span style="padding: 40px, 0, 0, 0;">可上传视频总数：{{videoNumLimit}}</span> -->
          </div>
          <!-- <div class="ml-10">
            <div>预览：</div>
            <div class="grid grid-cols-5 gap-4">
              <video
                v-for="item in showVideoSrc"
                controls
                muted
                autoplay="autoplay"
                :src="item"
                :key="item"
                class="
                  object-fill
                  w-48
                  h-44
                  rounded-md
                  border-gray-300 border-2
                "
              ></video>
            </div>
          </div> -->

          <!-- <div class="mt-6">
            <el-form-item>
              <span>固定视频时长：</span>
              <span>0秒</span>
              <el-form-item>
                <el-slider
                  v-model="duration"
                  :min="0"
                  :max="60"
                  class="w-96 px-2"
                ></el-slider>
              </el-form-item>
              <span>60秒</span>
            </el-form-item>
            <el-form-item class="ml-28">
              <span>生成视频个数：</span>
              <el-input-number
                v-model="videoNum"
                :min="0"
                :max="videoNumLimit"
                label="描述文字"
              ></el-input-number>
              <span style="margin-left: 20px">可制作视频总数：{{videoNumLimit}}</span>
            </el-form-item>
          </div> -->

          <!-- <div class="ml-10">
            <el-form-item> -->
              <!-- <el-button type="primary" @click="addVideo">提交</el-button> -->
              <!-- <el-button type="primary" @click="submitUpload"
                >上传到服务器</el-button
              > -->
              <!-- <el-button type="primary" @click="updateVideo">修改</el-button> -->
            <!-- </el-form-item>
          </div> -->
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import video from "@/network/api/video";
import axios from "axios";

export default {
  name: "index",
  data() {
    return {
      formData: {
        title: "",
      },
      imgData: {
        organId: JSON.parse(localStorage.getItem("updateUserInfo")).organId,
      },
      // imgAxiosUrl: "http://localhost:5024/uploadImg",
      imgAxiosUrl: "http://39.98.117.110:5024/uploadImg",
      // imgAxiosUrl: "http://192.168.124.20:5024/uploadImg",
      // imgAxiosUrl: "http://192.168.124.30:5024/uploadImg",
      // imgAxiosUrl: "http://103.206.203.140:5024/uploadImg",
      // imgAxiosUrl: "http://103.206.203.140:5024/uploadImg",
      guVideoData: {
        organId: JSON.parse(localStorage.getItem("updateUserInfo")).organId,
        wbh: 1,
      },

      // customVideoUrl: 'http://localhost:5024/uploadVideo',
      customVideoUrl: "http://39.98.117.110:5024/uploadVideo",

      // guVideoAxiosUrl: "http://localhost:5024/uploadGu",
      guVideoAxiosUrl: "http://39.98.117.110:5024/uploadGu",
      // guVideoAxiosUrl: "http://192.168.124.20:5024/uploadGu",
      // guVideoAxiosUrl: "http://192.168.124.30:5024/uploadGu",
      // guVideoAxiosUrl: "http://103.206.203.140:5024/uploadGu",
      // uploadUrl: "http://192.168.1.6:9020/qk/upload/app",
      imgSrc: [],
      videoSrc: [],
      showVideoSrc: [],
      showImgSrc: [],
      duration: 30,
      videoNum: 0,
      videoNumLimit: 0,
    };
  },

  computed: {
    videoNumLimitFun() {
      if (this.videoNumLimit == 0 || this.videoNumLimit == null) {
        return 0
      } else {
        return this.videoNumLimit
      }
    }
  },

  methods: {
    uploadImgSuccess(res, file) {
      this.imgSrc.push(res.data);
      this.showImgSrc.push(res.data);
      console.log(res);
    },
    uploadVideoSuccess(res, file) {
      this.videoSrc.push(res.data);
      console.log(res);
      this.$message({
        message: "恭喜你，这是一条成功消息",
        type: "success",
      });
    },
    addVideo() {
      let videoSrc = "";
      let imgSrc = "";
      this.videoSrc.forEach((item) => {
        videoSrc += item + ";";
      });
      this.imgSrc.forEach((item) => {
        videoSrc += item + ";";
      });
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const data = {
        organId: info.organId,
        name: this.formData.title,
        videoUrls: videoSrc,
        imgUrls: imgSrc,
        duration: this.duration,
        num: this.videoNum,
      };

      console.log(data);
      video.addVideo(data).then((res) => {
        console.log(res);
        // this.$router.push("/ems/VideoSynthesis/VideoManagement");
      });
    },

    updateVideo() {
      let videoSrc = "";
      let imgSrc = "";
      this.videoSrc.forEach((item) => {
        videoSrc += item + ";";
      });
      this.imgSrc.forEach((item) => {
        videoSrc += item + ";";
      });
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const id = localStorage.getItem("VideoId");
      const data = {
        id: id,
        organId: info.organId,
        name: this.formData.title,
        videoUrls: videoSrc,
        imgUrls: imgSrc,
        duration: this.duration,
        status: "",
        url: "",
      };
      video.updateVideo(data).then((res) => {
        console.log(res);
      });
    },

    queryUseable() {
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const data = {
        organId: info.organId,
      };
      video.queryUsable(data).then((res) => {
        console.log(res);
        this.videoNumLimit = res.data.data;
      });
    },

    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },

    httpRequest(param) {
      if (this.videoNumLimit == 0 || this.videoNumLimit == null) {
        this.$message.error('上传视频个数为零，或者可上传视频数为零');
      } else {
        const info = JSON.parse(localStorage.getItem("updateUserInfo"));
        let fileObj = param.file; // 相当于input里取得的files
        console.log(fileObj);
        let fd = new FormData(); // FormData 对象
        fd.append("file", fileObj); // 文件对象
        fd.append("organId", info.organId); // 用户Id
        fd.append("name", ""); // 标题
        fd.append("videoUrls", ""); // 视频地址
        fd.append("imgUrls", ""); // 图片
        fd.append("duration", ""); // 视频时长
        fd.append("num", ''); // 视频数量
        fd.append("type", `2`); // 是否是自定义视频
  
        // let url = "http://39.98.117.110:5024/uploadVideo";
        let url = "http://154.206.14.9:5024/uploadVideo";
        // let url = "http://localhost:5024/uploadVideo";
        // let url = "http://localhost:5024/uploadLong1";
        // let url = "http://localhost:5024/ceshi";
        // let url = "http://192.168.124.20:5024/ceshi";
        // let url = "http://192.168.124.20:5024/uploadLong";
        // let url = "http://192.168.124.30:5024/uploadLong";
        // let url = "http://192.168.124.30:5024/uploadLong1";
        // let url = "http://39.98.117.110:5024/uploadLong";
        // let url = "http://39.98.117.110:5024/uploadLong2";
        // let url = "http://tmp.qk-api.aike.info/qk/video/addVideo";
        // let url = "http://39.98.117.110:5024/ceshi";
        // let url = "http://103.206.203.140:5024/ceshi";
        // let url = "http://103.206.203.140:5024/uploadLong";
        let config = {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        };
        axios.post(url, fd, config).then((res) => {
          if (res.code === 0) {
            this.submitForm(); //提交表单
          }
        });

        this.$message({
          message: "上传成功",
          type: "success",
        });

        this.$router.push('/ems/VideoSynthesis/VideoManagement')

      }
    },
  },
  mounted() {
    this.queryUseable();
  },
};
</script>